<template>
  <!-- <el-container class="w-full h-[100vh]">
    <el-container>
      <el-header class="flex-center !h-[var(--sidebar-height)] !p-0">
        <AppLogo />
        <AppMenu :menu-list="menus" base-path="/" />
        <AppHeader />
      </el-header>
      <AppView />
    </el-container>
  </el-container> -->
  <tiny-container :pattern="pattern">
    <div class="demo-center">Main</div>
    <template #header>
      <div class="demo-center">Header</div>
    </template>
    <template #aside>
      <div class="demo-center">Aside</div>
    </template>
    <template #footer>
      <div class="demo-center">Footer</div>
    </template>
  </tiny-container>
</template>
<script setup lang="ts">
import { useAuthStore } from '@/stores'
const pattern = ref('default')

const authStore = useAuthStore()
const menus = computed(() => authStore.getAuthRoutes) // 混合布局左侧菜单
</script>
<style lang="scss" scoped>
@import '../index';
</style>
